<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <div class="logo-section">
        <!-- 使用自定义LOGO图片 -->
        <img src="./asset/logo.jpeg" alt="开放街景社区LOGO" class="logo-image">
        <h1 class="app-title">开放街景社区 OSMC</h1>
      </div>

      <el-dropdown class="user-dropdown">
        <div class="user-info">
          <el-avatar :size="40" :src="user.avatar" />
          <span class="user-name">{{ user.name }}</span>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goToUserInfo">
              <i class="el-icon-user"></i> 个人信息
            </el-dropdown-item>
            <el-dropdown-item divided @click="handleLogout">
              <i class="el-icon-switch-button"></i> 退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </header>

    <div class="main-content">
      <!-- 侧边导航栏 -->
      <div class="sidebar">
<!--        <div class="menu-container">-->
<!--          <router-link to="/home/official" class="menu-item" :class="{ active: activeMenu === 'official' }">-->
<!--            <el-icon><Position /></el-icon>-->
<!--            <span class="menu-text">官方地图</span>-->
<!--          </router-link>-->
<!--          <router-link to="/home/community" class="menu-item" :class="{ active: activeMenu === 'community' }">-->
<!--            <el-icon><Compass /></el-icon>-->
<!--            <span class="menu-text">社区地图</span>-->
<!--          </router-link>-->
<!--          <router-link to="/home/my" class="menu-item" :class="{ active: activeMenu === 'community' }">-->
<!--            <el-icon><User /></el-icon>-->
<!--            <span class="menu-text">我的发布</span>-->
<!--          </router-link>-->
        <el-menu
            :default-active = "route.path"
            router
            background-color="#D7ECFF"
            style="width: 220px; height: 100%; margin: 0; padding: 0; border: thick #000000; user-select: none"
        >
          <el-menu-item index="/home/official">
            <el-icon><Position /></el-icon>
            <span class="menu-text">官方地图</span>
          </el-menu-item>
          <el-menu-item index="/home/community">
            <el-icon><Compass /></el-icon>
            <span class="menu-text">社区地图</span>
          </el-menu-item>
          <el-menu-item index="/home/userDistribution">
            <el-icon><User /></el-icon>
            <span class="menu-text">我的发布</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 主内容区域 -->
      <main class="content-view">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Position, Compass, User } from '@element-plus/icons-vue';
import { computed } from 'vue'

// ======================== 数据部分 ========================
const route = useRoute();
const router = useRouter();

// 判断当前是否是地图页面
const isMapRoute = computed(() => {
  return route.path.includes('/home/official') ||
      route.path.includes('/home/community')
})

// 用户信息
const user = ref({
  name: '张明',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
});

// 当前激活的菜单项
const activeMenu = ref('official');

// ======================== 操作部分 ========================
// 退出登录处理
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('已退出登录');
    // 清除用户信息
    localStorage.removeItem('user');
    localStorage.removeItem('permission');
    // 跳转到登录页
    router.push('/login');
  }).catch(() => {
    // 取消退出
  });
};

// 跳转到个人信息页面
const goToUserInfo = () => {
  router.push('/home/userinfo');
};

// ======================== 生命周期/监听部分 ========================
// 监听路由变化，更新激活菜单
watch(() => route.path, (newPath) => {
  if (newPath.includes('official')) {
    activeMenu.value = 'official';
  } else if (newPath.includes('community')) {
    activeMenu.value = 'community';
  } else if (newPath.includes('myPublish')) {
    activeMenu.value = 'myPublish';
  }
}, { immediate: true });
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
  overflow: hidden;
}

/* 顶部导航栏样式 */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #409eff, #337ecc);
  color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0 30px;
  height: 64px;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 自定义LOGO样式 */
.logo-image {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  background-color: white; /* 为透明背景LOGO提供底色 */
}

.app-title {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.user-dropdown {
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-name {
  font-size: 1rem;
  font-weight: 500;
}

/* 主内容区域 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px; /* 固定为展开宽度 */
  height: 100%;
  background-color: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  z-index: 10;
}



.menu-item i {
  font-size: 20px;
  margin-right: 15px;
  min-width: 24px;
  text-align: center;
}


.content-view {
  flex: 1;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* 新增样式 */
.content-view.no-padding {
  padding: 0;
}

/* 确保header有足够高的z-index */
.app-header {
  z-index: 1002; /* 确保高于地图的z-index */
  position: relative; /* 创建新的堆叠上下文 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-header {
    padding: 0 15px;
  }

  .app-title {
    font-size: 1.2rem;
  }

  .user-name {
    display: none;
  }

  .content-view {
    padding: 10px;
  }

  /* 在小屏幕上调整LOGO大小 */
  .logo-image {
    width: 36px;
    height: 36px;
  }
}

</style>
